<template>
	<div>
		<div class="common-header">
			<div class="h-l" @click="deBugModel()">
				<slot></slot>
			</div>
			<div class="h-c"></div>
			<div class="h-r">
				<router-link 
					to='/register'
					v-if='nickName ? false: true'
				>
					<p class="add-p">
						注册
					</p>
				</router-link>
				<router-link 
					to=''
					v-if='nickName ? true: false'
				>
					<p class="add-p">
						交流
					</p>
				</router-link>
				<router-link 
					to='/users' 
					v-if='nickName ? false: true'
				>
					<p>
						登录
					</p>
				</router-link>
				
				<router-link to='/operation'>
					<p v-if='nickName ? true: false'>
						发布
					</p>
				</router-link>
				
				<span 
					class="iconfont not-icon" 
					@click="ShowSideMenu" 
					v-if='nickName ? false: true'
				>
					&#xe62e;
				</span>
				<div 
					class="menu-icon" 
					@click="ShowSideMenu" 
					v-if='nickName ? true: false'
				>
					<img 
						class="menu-icon-small-avatar" 
						:src="nickAvatar" 
					/>
				</div>
			</div>
		</div>
		
		<transition
				@before-enter='MenuBeforeEnter'
				@enter='MenuEnter'
				@after-enter='AfterEnter'				
				@before-leave='MenuBeforeLeave'
				@leave='MenuLeave'
				@after-leave='AfterLeave'
		>
			<div class="common-menu" v-show='switchMenu'>
				
				<div class="common-menu-button" @click="CloseSideMenu">
					<span 
						class="iconfont common-menu-close-icon"
					>
						&#xe62e;
					</span>
				</div>
								
				<div class="common-menu-user">
					
					<div class="menu-user-avatar">
						<span 
							v-show='nickName ? false : true' 
							class="iconfont common-menu-not-avatar"
						>
							&#xe611;
						</span>
						<img
							v-show='nickName ? true : false' 
							:src="nickAvatar" 
						/>
					</div>
					
					<div class="menu-user-name">
						<p class="user-name">
							{{nickName? nickName: '未登录'}}
						</p>
						<p class="user-info">
							 CopyRight © 2019 Nfd
						</p>
					</div>
					
				</div>
				
				<div class="common-menu-list">
					<div class="list-item">
						<span class="iconfont list-item-icon">
							&#xe602;
						</span>
						<span class="list-item-p">
							我的关注
						</span>
					</div>
					<div class="list-item">
						<span class="iconfont list-item-icon">
							&#xe640;
						</span>
						<span class="list-item-p">
							我的收藏
						</span>
					</div>
					<div class="list-item">
						<span class="iconfont list-item-icon">
							&#xe618;
						</span>
						<span class="list-item-p">
							我的订单
						</span>
					</div>
					<div class="list-item">
						<span class="iconfont list-item-icon">
							&#xe647;
						</span>
						<span class="list-item-p">
							皮肤中心
						</span>
					</div>
					<div class="list-item">
						<span class="iconfont list-item-icon">
							&#xe635;
						</span>
						<span class="list-item-p">
							用户反馈
						</span>
					</div>
				</div>
				
				<div class="common-menu-bottom-button">
					<button 
						v-show='nickName ? true : false' 
						class='logout-button'
						:class='{ logOutButtonActive: logOutActive }'
						@touchstart="OutTouchStart()" 
						@touchend="OutTouchEnd()"
						@click="LogOut()"
					>
						退出
					</button>
				</div>	
			</div>
		</transition>
		<transition 
			enter-active-class='animated fadeIn fastFourMs'
			leave-active-class='animated fadeOut fastFourMs'
		>
			<div 
				class="common-menu-mask" 
				v-show='switchMenu' 
				@click="CloseSideMenu"
			>
			</div>
		</transition>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'common-header',
		data () {
			return {
				logOutActive: false,
				switchMenu: false,
				nickName: '',
				nickAvatar: '',
				clickNum: 0
			}
		},
		methods: {
			// get users storage info
			UserLocalStorage () {
				this.nickName = localStorage.getItem('user_name')
				this.nickAvatar = localStorage.getItem('user_avatar')
			},
			ShowSideMenu () {
				this.switchMenu = true
			},
			CloseSideMenu () {
				this.switchMenu = false
			},
			MenuBeforeEnter (el) {
				el.style.right = -600
			},
			MenuEnter (el, done) {
				Velocity(el, {
					right:0
				}, {
					duration:340,
					delay:0,
					complete: done	
				})
			},
			AfterEnter (el) {
				//console.log('执行完毕')
			},
			
			MenuBeforeLeave (el) {
				el.style.right = 0
			},
			MenuLeave (el, done) {
				Velocity(el, {
					right: -900
				}, {
					duration:340,
					delay:0,
					complete: done
				})
			},
			AfterLeave (el) {
				//console.log('执行完毕')
			},
			OutTouchStart () {
				this.logOutActive = true
			},
			OutTouchEnd (){
				this.logOutActive = false
			},
			LogOut () {
				localStorage.removeItem('user_id')
				localStorage.removeItem('user_name')
				localStorage.removeItem('user_avatar')
				axios.get('/users/loginout').then( response=> {})
				this.nickName = ''
				this.switchMenu = false
			},
			//	后门，调试入口
			deBugModel () {
				let _this = this
				_this.clickNum++
				if (_this.clickNum == 10) {
					//alert('开发者模式开启')
					console.log('[kn-bbs] 初始化调试环境...')
					setTimeout( ()=> {
						console.log('[kn-bbs] 初始化参数...')
					},500)
					
					
					var IntVal = setInterval( ()=> {
						console.log('[kn-bbs] The time stamp' + Math.random())
					},50)
					
					setTimeout( ()=> {
						clearInterval(IntVal)
					},1200)
					
					setTimeout( ()=> {
						console.log('[kn-bbs] 加载模块...')
					},1400)
					setTimeout( ()=> {
						console.log('[kn-bbs] debug模式开启...')
					},1800)

 					setTimeout( ()=> {
 						console.log('[kn-bbs] 检测到暂无操作，调试模式关闭...')
 						
 					},10000)
				
 					setTimeout( ()=> {
 						console.clear()
 					},15000)
				}		
				
			}
		},
		mounted () {
			this.UserLocalStorage()
		},
		activated () {
			this.UserLocalStorage()
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.common-header
		height:94px
		background:$bgColor
		display:flex
		flex-direction:row
		border-bottom:2px #F0F0F0 solid
		overflow:hidden
		.h-l
			width:180px
			height:94px
			background-image: url(../assets/images/logo.png)
			background-repeat: no-repeat
			background-size: contain
			background-position:center
			margin-left:18px
		.h-c
			flex:1
		.h-r
			width:290px
			height:94px
			position:relative
		.h-r a
			color:#666
		.add-p
			margin-left:18px
		.h-r p
			display:inline-block
			font-size:34px
			margin-right:24px
			line-height:94px
		.nick-box
			width:100px
			height:30px
			display:inline-block
			overflow:hideen
			text-overflow:ellipsis
			white-space:nowrap
		.not-icon
			font-size:44px
			display:inline-block
			position:absolute
			right:12px
			top:0
			color:#666
			cursor:pointer
			padding:26px 10px
		.menu-icon
			font-size:38px
			display:inline-block
			background:#ccc
			width:60px
			height:60px
			position:absolute
			right:24px
			top:18px
			cursor:pointer
			outline:none
			border-radius:50%
			overflow:hidden
			.menu-icon-small-avatar
				width:100%		
	.common-menu-mask
		z-index:9999
		position:fixed
		left:0
		right:0
		top:0
		bottom:0
		background:rgba(0, 0, 0, 0.5)
	.common-menu
		z-index:99999
		width:600px
		position:fixed
		right:-600px
		top:0
		bottom:0
		background:#fff
		cursor:pointer
		.common-menu-button
			z-index:9999
			width:94px
			height:94px
			display:flex
			align-items:center
			justify-content:center
			position:absolute
			right:2px
			top:2px
			.common-menu-close-icon
				font-size:42px
				color:#fff
		.common-menu-user
			height:400px
			/*background:#308ee3*/
			background:linear-gradient(to right, #4075FF 10% ,#29B6FD 80%, #32A8FE 100%)
			position:relative
			.menu-user-avatar
				width:150px
				height:150px
				border-radius:50%
				overflow:hidden
				position:absolute
				top:66px
				left:50px
				.common-menu-not-avatar
					font-size:150px
					color:#fff
			.menu-user-avatar img
				width:100%
			.menu-user-name
				width:400px
				height:140px			
				position:absolute
				bottom:0
				left:66px
				overflow:hidden
				.user-name
					font-size:36px	
					color:#fff
					white-space:nowrap	
				.user-info
					font-size:24px
					margin-top:26px
					color:#d3d6db
					line-height:34px
			.common-menu-user-r
				width:62%
				height:100%
				display:flex
				align-items:center
			.common-menu-user-r p
				width:240px
				height:36px
				font-size:36px
				margin-left:10px
				overflow:hidden
				padding:1px 0
				white-space:nowrap
		.common-menu-list
			margin-top:20px
			color:#7e848c
			.list-item
				height:100px
				display:flex
				align-items:center
				.list-item-icon
					margin:0 30px 0 60px
					font-size:36px
					font-weight:bold
				.list-item-p
					font-size:30px					
		.common-menu-bottom-button
			width:100%
			height:140px
			position:absolute
			bottom:0
			left:0
			.logout-button
				display:block
				padding:24px 220px
				border:none
				margin:0 auto
				font-size:30px
				outline:none
				cursor:pointer
				background:#dd514c
				color:#fff
				border-radius:6px
			.logOutButtonActive
				background:darkred
</style>
